<template>
<div>
<van-nav-bar title="天天头条 - 登录" />
<!-- 登录 -->
<van-form @submit="onSubmit">
  <van-field v-model="user.mobile" name="mobile" required label="手机号码" placeholder="请填写11位手机号"
    :rules="[{ required: true, message: '请填写手机号码',pattern: /^1[3-9]\d{9}$/ }]" />
  <van-field v-model="user.code" type="password" required name="code" label="密码" placeholder="密码"
    :rules="[{ required: true, message: '请填写密码',pattern: /^\d{6}$/ }]" />
  <div style="margin: 16px;">
    <van-button round block type="info" :loading='loadingFlag' :disabled="loadingFlag" loading-text="加载中..."
      native-type="submit">登录</van-button>
  </div>
</van-form>
</div>

</template>

<script>
import { loginApi } from '@/api'
import { setToken } from '@/utils/token'
export default {
  data () {
    return {
      loadingFlag: false,
      user: {
        mobile: '',
        code: '246810'
      }
    }
  },
  methods: {
    // 提交登录
    async  onSubmit () {
      this.loadingFlag = true
      try {
        const res = await loginApi(this.user)
        setToken(res.data.data.token)
        localStorage.setItem('refresh_token', res.data.data.refresh_token)
        this.$notify({ type: 'success', message: '登录成功' })
        this.$router.replace({
          path: this.$route.query.path || '/layout/home'
        })
      } catch (error) {
        this.$notify({ type: 'danger', message: '账号或密码错误' })
      }
      this.loadingFlag = false
    }
  }
}
</script>

<style scoped lang="less">

</style>
